<template>
  <div>
    <!-- 设置视频插件容器 -->
    <div id="videoContainer"></div>
  </div>
</template>

<script>
import {
  Svideo,
  NextControl,
  VideoSource,
  DbspeenControl,
  FullScreenControl,
  BarrageControl,
} from "supervideo";
export default {
  mounted() {
    // console.log(BarrageControl, "BarrageControl");
    this.$nextTick(() => {
      document.getElementById("videoContainer").oncontextmenu = function (e) {
        return false; //取消右击事件，去除右击保存视频功能
      };
      this.createVideo();
    });
  },
  methods: {
    createVideo() {
      /* 以下将定义视频插件常用的几个控件 */
      // 实例化一个“下一个”按钮控件
      var nextControl = new NextControl();
      // 实例化一个倍速控件
      var Dbspeen = new DbspeenControl();
      // 实例化一个弹幕输入框控件-----------------------------------------------------弹幕--输入框控件
      var barrageControl = new BarrageControl();
      // 实例化一个全屏按钮控件
      var fullScreenControl = new FullScreenControl();
      // 实例化视频播放资源
      var source = new VideoSource({
        // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
        // src: 视频路径，可以是本地路径亦可是网络路径
        type: "mp4",
        src: "https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4",
      });

      /* 插件的常用配置参数 */
      var config = {
        // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
        autoplay: false,
        currentTime: 0, // 设置视频初始播放时间，单位为秒
        loop: false, // 是否循环播放
        muted: false, // 是否默认静音
        playbackRate: 1, // 视频默认播放速度
        poster: "", // 视频首帧图片路径
        volume: 0.5, // 视频默认音量 0-1
        showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
        source: source, // 为视频插件设置资源
        leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
        rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
        centerControls: [barrageControl], // 在底部控件栏中间插入 “弹幕输入控件”
        poster: "http://www.sohu.com/a/228606368_100141990", //视频封面,默认视频的第一个画面
      };

      //   初始化插件superVideo('videoContainer')请对应好html中的插件容器id.
      this.video = new Svideo("videoContainer", config);
      // console.log( this.video.getNetworkState(),"网络状态");
      /* 以下是控件类常用的监听事件 */
      var this_ = this;
      // 监听“下一个”按钮控件点击事件
      nextControl.addEventListener("click", function (event) {
        // if (this_.nextID) {
        //   this_.getInfo(this_.nextID);
        // } else {
        //   this_.$message({
        //     message: "这是最后一个视频了！为您播放第一个视频。",
        //     type: "warning",
        //   });
        //   this_.getInfo(this_.firstID);
        // }
      });
      // 监听进入全屏模式后触发（点击进入全屏按钮）
      fullScreenControl.addEventListener("fullscreen", function (event) {
        console.log("is fullscreen !!!");
      });
      // 监听退出全屏模式后触发（点击退出全屏按钮）
      fullScreenControl.addEventListener("cancelfullscreen", function (event) {
        console.log("cancel fullscreen !!!");
      });
      // 监听发送弹幕输入框输入并发送弹幕后触发
      barrageControl.addEventListener("send", function (event) {
        var value = event.target.option.value;
        console.log("send " + value);
      });

      /* 以下是video类常用的监听事件 */
      // 视频准备就绪
      this.video.addEventListener("ready", function () {
        console.log("is ready!");
      });
      this.video.addEventListener("loadedmetadata", function (event) {
        // console.log(event, "成功获取数据源长度");
      });
      // 开始播放
      this.video.addEventListener("play", function () {
        console.log("is play!");
      });
      // 暂停播放
      this.video.addEventListener("pause", function () {
        console.log("is pause!");
      });
      // 监听进入全屏模式后触发
      this.video.addEventListener("fullscreen", function (event) {
        console.log("is fullscreen !!!");
      });
      // 监听退出全屏模式后触发
      this.video.addEventListener("cancelfullscreen", function (event) {
        console.log("cancel fullscreen !!!");
      });
      this.video.addEventListener("ended", () => {
        console.log("播放结束");
        // if (this_.nextID) {
        //   this_.getInfo(this_.nextID);
        // } else {
        //   this_.$message({
        //     message: "这是最后一个视频了！为您播放第一个视频。",
        //     type: "warning",
        //   });
        //   this_.getInfo(this_.firstID);
        // }
      });

      /* 下面将演示弹幕类的用法 */

      //   初始化一个弹幕实例
      var barrage1 = new Barrage("我是一条红色的超大号字体弹幕", {
        color: "red",
        fontSize: 30,
      });
      //   将该弹幕加入播放器插件
      this.video.addBarrage(barrage1);

      //   还可以在弹幕中插入一些dom节点
      var vipDom = document.createElement("span");
      vipDom.innerHTML = "V";
      vipDom.style.color = "green";
      vipDom.style.fontSize = "20px";
      vipDom.style.fontWeight = "600";
      vipDom.style.marginRight = "4px";
      var barrage2 = new Barrage("我是超级会员VIP", {
        color: "orange",
        fontSize: 15,
        leftDom: vipDom, // 将DOM插入弹幕左侧
      });
      this.video.addBarrage(barrage2);

      //   当然也可以这样简单的使用
      this.video.addBarrage("冲鸭~~~~~~");
      this.video.addBarrage("奥里给！！！！！！");
    },
  },
};
</script>

<style>
/* 设置视频外部容器样式 */
#videoContainer {
  width: 800px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: #010101;
}
#item_box {
  position: relative;
}
/* 视频播放器的loading */
#videoContainer >>> .sv-common {
  /* height: 10vw; */
  max-height: 100%;
  overflow: auto;
  /* width: 1vw; */
  width: 10px;
  height: 35px;
  margin: auto;
  max-width: 100%;
  position: absolute;
  border-radius: 0vw 10px 0vw 10px;
  /* box-shadow: inset 0vw 0vw 0vw 0.1vw #e645d0, 0vw 0vw 1.5vw 0vw #e645d0; */
  box-shadow: inset 0vw 0vw 0vw 0.1vw #206bd1, 0vw 0vw 1.5vw 0vw #206bd1;
}
</style>